<?php
//Código para el idioma
    if($leng == "en")
    {
        include_once APP_PATH.'libs/en.php';
    }
    else
    {
        include_once APP_PATH.'libs/es.php';
    }
    ?>
<!--Estilos para mensajes y errores de validación-->

<style>
    .mensajeVal{
    background-color: #4AC948;
    padding: 6px 12px;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    margin-left: 16px;
    margin-top: 6px;
    position: absolute;
}
    .mensajeVal:before{ /* Este es un truco para crear una flechita */
    content: '';
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #BC1010;
    border-left: 8px solid transparent;
    left: -16px;
    position: absolute;
    top: 5px;
}
    .errorVal{
    background-color: #BC1010;
    padding: 6px 12px;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    margin-left: 16px;
    margin-top: 6px;
    position: absolute;
}
.errorVal:before{ /* Este es un truco para crear una flechita */
    content: '';
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #BC1010;
    border-left: 8px solid transparent;
    left: -16px;
    position: absolute;
    top: 5px;
}
</style>

<!--PARA GOOGLE MAPS COMIENZO-->
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>

<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false">
//Esto carga el Places Library, necesario para el autocompletado de direcciones texto
</script>

<script type="text/javascript">
//Este código carga el mapa en santiago cuando el html se ha terminado
//de ejecutar completamente
//FUNCTION INITIALIZE
var map;
var markersArray = [];
$(document).ready(function(){
    
    //Ocultamos el boton de obtener direccion e inhabilitamos campos
    $(".json-direccion, .submit, .advertencia, .tr_direccion, .tr_ciudad, .tr_region, .advertencia_json").hide();
    $(".direccion, .ciudad, .region").attr('readonly','readonly');

    //Setup del mapa
    var myOptions = {
          zoom: 8,
          center: new google.maps.LatLng(-33.45, -70.66),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
    map = new google.maps.Map(document.getElementById('map_canvas'),
            myOptions);
      
   
    google.maps.event.addListener(map, 'click', function(event) {  //Al hacer click en el mapa...
    
    //AÑADIMOS EL MARCADOR
    addMarker(event.latLng);
    
    //Habilitamos el boton obtener dirección
    if ( $(".direccion").val() == "" ) $(".json-direccion, .advertencia_json").show();
    
    //Modificamos los campos de latitud y longitud
    document.getElementById("latitud-temp").value = event.latLng.lat();
    document.getElementById("longitud-temp").value = event.latLng.lng();
    
    }); //Fin al hacer click en el mapa
  
});
</script>


<script type="text/javascript"> //OBTENCION DE LA DIRECCION BOTON OBTENER DIRECCION
    $(document).ready(function(){
        //Al presionar el boton se ejecutará lo siguiente
        $(".json-direccion").click(function (){
            
            //Obtenemos las coordenadas del marcador
            var lat =  document.getElementById("latitud-temp").value;
            var lng =  document.getElementById("longitud-temp").value;
            
            //las asignamos a las variables que iran a la BD
            $(".longitud").val(lng);
            $(".latitud").val(lat);
            
            //Uso de variables temporales se justifica por si el usuario cambia el marcador
            //Despues de hacer click en el boton OBTENER DIRECCION
            
            //Dandole formato a nuestras coordenadas
            var latlng = new google.maps.LatLng(lat,lng);
            
            //Consultamos la dirección de nuestras coordenadas
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode( {'latLng': latlng },
            function(data, status) 
            { 
                //0 - Lineas de ayuda para la codificacion (luego comentarlas)
                //console.log(data); //Linea para analizar el objeto que devuelve
                //$(".tablaform").after("<br>"+data[0].formatted_address);
                
                //Obtener la direccion y cortarla
                var full_address = data[0].formatted_address;
                var sliced_address=full_address.split(",");
                
                //1 - Obtención de datos y validacion dirección Chilena
                if(sliced_address.length == 4) //Obtuvimos una direccion con todos los datos
                {
                    if($.trim(sliced_address[3]) != "Chile"){alert("<?php echo $ubicacion_ingresar_mapa_valpais; ?>") ;return false;}
                    $(".direccion").val($.trim(sliced_address[0]));
                    $(".ciudad").val($.trim(sliced_address[1]));
                    $(".region").val($.trim(sliced_address[2]));
                }
                else if(sliced_address.length == 3) //el 2 es el pais
                {
                    if($.trim(sliced_address[2]) != "Chile"){alert("<?php echo $ubicacion_ingresar_mapa_valpais; ?>") ;return false;}
                    $(".direccion").val("No disponible");
                    $(".ciudad").val($.trim(sliced_address[0]));
                    $(".region").val($.trim(sliced_address[1]));
                }
                else if(sliced_address.length == 2)//SOLO REGION Y PAIS
                {
                    //sliced_address[sliced_address.length-1] ES EL PAIS
                    if($.trim(sliced_address[sliced_address.length-1]) != "Chile"){alert("<?php echo $ubicacion_ingresar_mapa_valpais; ?>") ;return false;}
                    $(".direccion").val("No disponible");
                    $(".ciudad").val("No disponible");
                    $(".region").val($.trim(sliced_address[sliced_address.length-2]));
                }
                
 
                //2 - Limitamos el uso del boton a una vez escondiéndolo
                $(".json-direccion, .advertencia_json").hide();

                //3 - Mostramos el botón submit y su advertencia
                $(".submit, .advertencia, .tr_direccion, .tr_ciudad, .tr_region").show();
            });


        });
    });

</script>

<script type="text/javascript">
    //MANEJO DE MARCADORES EN EL MAPA

function addMarker(location) {
        deleteOverlays(); //LIMPIAMOS MARCADORES ANTERIORES
        marker = new google.maps.Marker({
            position: location,
            map: map,
            title:"<?php echo $nombre_cliente ?>"
        });
       
        markersArray.push(marker); 
        
    }
    
    //LIMPIA EL ARRAY DE MARCADORES
    function deleteOverlays() {
    if (markersArray) {
        for (i in markersArray) {
            markersArray[i].setMap(null);
        }
        markersArray.length = 0;
    }
      
}
    
</script>

<?php
//Incluimos el Geocomplete plugin
echo Tag::js('jquery.geocomplete.min');
?>

<script type="text/javascript">
$(document).ready(function(){
    $("#direccion_input").geocomplete();
});
</script>


<!--FIN CODIGO PARA GOOGLE MAPS-->
<?php echo Form::open('ubicacion/ingresar_mapa/'.$leng) ?>
<fieldset>
    <div align="center">
        <table>
            <tr>
                <td><?php echo $usuario_buscar_centro; ?>:&nbsp;</td>
                <td><?php echo $nombre_cliente; ?></td>
            </tr>
        </table>
        <br><h6><?php echo $ubicacion_ingresar_titulo2; ?></h6>
        
        <div id="map_canvas" style="width:400px; height:400px"></div>
        
        <?php
            echo Html::link("ubicacion/ingresar/".$leng, ''.$ubicacion_ingresar_titulo1.'');
        ?>
        <br>
        <table class="tablaform">
            <tr>
                <td><?php echo Form::hidden('ubicacion.latitud_ubi','class="latitud" placeholder=" l a t i t u d "','')?></td>
                <td><?php echo Form::hidden('ubicacion.longitud_ubi','class="longitud" placeholder=" l o n g i t u d "','')?></td>
            </tr>
            <tr class="tr_direccion">
                <td><?php echo $cliente_detalle_direccion;  ?>:&nbsp;</td>
                <td><?php echo Form::text('ubicacion.direccion_ubi','class="direccion" ','')?></td>
            </tr>
            <tr class="tr_ciudad">
                <td><?php echo $ubicacion_ingresar_mapa_ciudad; ?>:&nbsp;</td>
                <td><?php echo Form::text('ubicacion.ciudad_ubi','class="ciudad" ','')?></td>
            </tr>
            <tr class="tr_region">
                <td>Regi&oacute;n:&nbsp;</td>
                <td><?php echo Form::text('ubicacion.region_ubi','class="region" ','')?></td>
            </tr>
            <tr>
                <td colspan="2"><center>
                    <p class="advertencia_json"><i><?php $ubicacion_ingresar_mapa_advertencia; ?></i></p>
                    <?php echo Form::button(''.$ubicacion_ingresar_mapa_obtener.'','class="json-direccion btn btn-success"')?>
                </center></td>
            </tr>
            <tr>
                <td colspan="2"><center>
                    <p class="advertencia"><i><?php echo $ubicacion_ingresar_mapa_check; ?></i></p>
                    <?php echo Form::submit(''.$ubicacion_ingresar_mapa_confirmar.'', 'class="btn btn-primary submit"') ?>&nbsp;
                </center></td>
            </tr> 
        </table>
        
        <?php 
        echo Form::hidden('ubicacion.id_usu','',$id_usu);
        echo Form::hidden('ubicacion.estado_ubi','','1');
        ?>
        
                
    </div>
</fieldset>
<?php echo Form::close() ?>     

<?php 
    echo Form::hidden('latitud-temp','class="latitud-temp" placeholder=" l a t i t u d "','');
    echo Form::hidden('longitud-temp','class="longitud-temp" placeholder=" l o n g i t u d "','');

    
?>